<script >
import { schoolData } from '@/api/home'

export default {
    data() {
        return {
            // 输入框
            input: '',
            // 输入框双向绑定
            value1: '',
            value2: '',


            // 选择框
            options1: [
                {
                    value: '四川省成都市武侯区',
                    label: '四川省成都市武侯区',
                },
                {
                    value: '河北省保定市定州市',
                    label: '河北省保定市定州市',
                },
                {
                    value: '山东省清华市七八区',
                    label: '山东省清华市七八区',
                },
                {
                    value: '北京市大兴区晓晓镇',
                    label: '北京市大兴区晓晓镇',
                }
            ],
            options2: [
                {
                    value: '公办',
                    label: '公办',
                },
                {
                    value: '民营',
                    label: '民营',
                },
                {
                    value: '公私合营',
                    label: '公私合营',
                }
            ],

            mydata: schoolData(),
            // 表格
            tableData: [],
            // 当前页码
            cunrrentPage:1,
            // 添加数据
            myobj: {},

        }
    },
    computed:{
        // 根据当前页码获取到当前页码的数据
        computedTableData(){
            return this.tableData.slice((this.cunrrentPage-1)*5,(this.cunrrentPage-1)*5+5)
        }
    },
    methods: {
        // 添加信息
        queryAndQivot() {

            this.myobj.date = 7;
            this.myobj.name = 'xx小学';
            this.myobj.schooldata = this.input;
            this.myobj.schooltype = '公办';
            this.myobj.schoolclass = this.value2;
            this.myobj.district = this.value1;

            this.tableData.push(this.myobj);

            this.myobj = {};


        },

    },
    mounted() {
        this.mydata.then(res => {
            // console.log(res.data.data);
            this.tableData = res.data
            console.log(res.data);
        })


    }
}




</script>


<template>
    <div>
        <el-input v-model="input" placeholder="请输入学校名称或代码" size="large" style="width: 180px;" />

        地区:
        <el-select v-model="value1" class="m-2" placeholder="请选择">
            <el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
        学校办别:
        <el-select v-model="value2" class="m-2" placeholder="请选择">
            <el-option v-for="item in options2" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>

        <el-button type="primary" @click="queryAndQivot">添加</el-button>



        <!-- 描述列表 -->
        <el-table :data="computedTableData" style="width: 100%;margin-top: 10px;">
            <el-table-column type="index" label="序号" width="180" />
            <el-table-column prop="name" label="学校名称" width="180" />
            <el-table-column prop="schooldata" label="学校代码" />
            <el-table-column prop="schooltype" label="学校类型" />
            <el-table-column prop="schoolclass" label="学校办别" />
            <el-table-column prop="district" label="所属地区" />

            <!-- <el-table-column v-for="item in tableData" prop="district" label="所属地区" /> -->


        </el-table>
        <!-- 分页 -->
        <el-pagination background layout="prev, pager, next" :total="tableData.length*2"  v-model:current-page="cunrrentPage"/>
    </div>
</template>


<style lang="scss" scoped></style>

